<template>
  <div class="app-container">
    <Ht-search-form
      v-show="showSearch"
      :dictMap="dictMap"
      :queryParams="queryParams"
      :outputQueryParams="queryParams"
      :formOptions="formOptions"
      :advOptions="[]"
      permission="user:userFile:view"
    ></Ht-search-form>

    <ht-table
      ref="dataTable"
      :dictMap="dictMap"
      :queryParams="queryParams"
      :tableBindColumns="tableBindColumns"
      :opButtonList="opButtonList"
      :reqConfig="reqConfig"
    >
      <template v-slot:operate>
        <el-table-column
          :label="$t('common.operation')"
          align="left"
          width="120"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleDownload(scope.row)"
              v-if="scope.row.delFlag == 1"
              v-hasPermi="['user:userFile:download']"
              >{{ $t("authority.userFile.form.download") }}
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.row)"
              v-hasPermi="['user:userFile:remove']"
              >{{ $t("common.delete") }}
            </el-button>
          </template>
        </el-table-column>
      </template>
    </ht-table>

    <ht-upload-file
      :open="open"
      @closeFileUploadDialog="closeFileUploadDialog"
    ></ht-upload-file>
  </div>
</template>

<script>
import {
  apiUrlConfig,
  listUserFile,
  download,
  delUserFile,
} from "@/api/authority_app/monitoring/userFile";
import { listPageMixin } from "@/libs/listPageMixin";

export default {
  name: "fileInfo",
  mixins: [listPageMixin],
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //子项目弹出层标题
      titleChild: "",
      // 是否显示子项目弹出层
      openChild: false,
      // 状态数据字典
      statusOptions: [],
      // 查询参数
      queryParams: {
        orderByColumn: "",
        isAsc: "asc",
        id: "",
      },
      formOptions: [],
      opButtonList: () => {
        return [
          {
            label: this.$t("common.add"),
            type: "primary",
            icon: "el-icon-plus",
            permission: "user:userFile:add",
            clickFun: () => {
              this.handleAdd();
            },
          },
          // { label: '导出', type: 'success',
          //   icon: 'el-icon-edit',permission: 'user:userFile:export',clickFun: () => {
          //     this.handleExport()
          //   }
          // }
        ];
      },
      reqConfig: apiUrlConfig,
      // 列信息
      tableBindColumns: [
        { label: this.$t("authority.userFile.form.id"), prop: "id" },
        { label: this.$t("authority.userFile.form.name"), prop: "name" },
        { label: this.$t("authority.userFile.form.type"), prop: "type" },
        {
          label: this.$t("authority.userFile.form.delFlag"),
          prop: "delFlag",
          dictCode: "sys_yes_no",
        },
        {
          label: this.$t("authority.userFile.form.createTime"),
          prop: "createTime",
          width: "180",
        },
      ],
      curFileInfoId: "",
    };
  },
  created() {
    this.getDicts("sys_yes_no").then((response) => {
      this.statusOptions = response.result;
    });
  },
  mounted() {
    const formOptions = [
      {
        type: "input",
        prop: "id",
        defaultAttr: {
          size: "small",
          label: this.$t("authority.userFile.form.id"),
          placeholder: this.$t("authority.userFile.rules.idPLH"),
        },
      },
    ];
    this.formOptions = formOptions;
  },
  methods: {
    listReq(pageParams) {
      return listUserFile(pageParams);
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.curFileInfoId = "";
      this.open = true;
      this.title = this.$t("authority.userFile.form.addFile");
    },

    // 字典状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.delFlag);
    },

    // handleExport() {
    //   const queryParams = this.queryParams;
    //   this.$confirm("确认导出所有文件吗?", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(function () {
    //       return listUserFile(queryParams, true);
    //     })
    //     .then((res) => {
    //       console.log(res);
    //       this.downloadFile(res.fileId);
    //     });
    // },
    /** 下载按钮操作 */
    handleDownload(row) {
      download(row.id);
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm(
        this.$t("authority.userFile.rules.deleteTip", { val: row.id }),
        this.$t("authority.userFile.form.warning"),
        {
          confirmButtonText: this.$t("common.confirm"),
          cancelButtonText: this.$t("common.cancel"),
          type: "warning",
        }
      )
        .then(function () {
          return delUserFile(row.id);
        })
        .then(() => {
          this.$refs.dataTable.doQuery(true);
          this.msgSuccess(this.$t("common.deleteSuccess"));
        });
    },
    closeFileUploadDialog(dataList) {
      this.open = false;
      console.log("上传文件结果", dataList);
      //如果有提交回来数据则刷新列表
      if (dataList && dataList.length) {
        this.$refs.dataTable.doQuery(false);
      }
    },
  },
};
</script>
